<template>
  <div class="search">
    <div class="search-title clearfix">
      <a href="javascript:;" class="goBack" @click.stop="goBack"></a>
      <input type="text" id="searchWord" class="searchWord" v-model="search.contractNo" @focus.stop="onFocus">
      <a href="javascript:;" class="ico-search" @click="searchList"></a>
    </div>
    <div class="list-container">
      <mt-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore">
        <ul id="deal-house-list">
          <li v-for="house in dealHouseList" class="clearfix">
            <div class="house-left" @click.stop="toServiceDiary(house)">
              <h5>{{house.contractNo}}</h5>
              <p>{{house.houseAddress}}</p>
            </div>
            <div class="house-right">
              <button @click.stop="toUpdateServiceDiary(house)">前往更新</button>
            </div>
          </li>
        </ul>
      </mt-loadmore>
    </div>
    <mt-spinner
      type="snake"
      color="#ff5658"
      :size='20'
      :class="'loadingMore'"
      v-show="allLoaded"
    ></mt-spinner>
  </div>
</template>
<script>
  import { EMPLOYEE_KEY, SEARCH_HISTORY_CACHE_KEY, HOUSE_NUMBER_LSIT_PATH, deviceHeight, globalHostServiceDiary } from '../../assets/js/config'
  import cache from '../../assets/js/cache'
  let historyCache = cache.get(SEARCH_HISTORY_CACHE_KEY)
  historyCache = historyCache === null ? [] : historyCache.split(',')
  export default {
    name: 'serviceListByHouseNumber',
    data () {
      return {
        deviceHeight,
        allLoaded: false,
        search: {
          contractNo: '',
          pageNum: 1,
          numPerPage: 20,
          token: ''
        },
        dealHouseList: [],
        searchHistoryCache: historyCache,
        showMatchList: 0,
        showSearchCasePanel: 0,
        showHistoryList: 0
      }
    },
    created () {
      this.search.token = cache.get(EMPLOYEE_KEY)
      let params = this.$route.params
      if (params.contractNo !== undefined && params.contractNo !== '') {
        this.search.contractNo = params.contractNo
      }
      this.getDealHouseList()
    },
    mounted () {
    },
    methods: {
      goBack () {
        this.$router.push({path: '/index'})
      },
      onFocus () {
        let contractNo = this.search.contractNo
        this.$router.push({name: 'serviceList', params: {contractNo, state: 0}})
      },
      searchList () {
        this.dealHouseList = []
        this.search.pageNum = 1
        this.getDealHouseList()
      },
      loadBottom () {
        this.getDealHouseList()
        this.$refs.loadmore.onBottomLoaded()
      },
      getDealHouseList () {
        this.allLoaded = true
        let myVue = this
        let getHouseListOption = {
          url: HOUSE_NUMBER_LSIT_PATH,
          sendData: myVue.search,
          success (data) {
            let dataList = data.record
            if (dataList.length < 20) {
              myVue.$toast({
                message: '没有更多数据了',
                duration: 1000
              })
            }
            dataList.map(function (ele, idx) {
              myVue.dealHouseList.push(ele)
            })
            myVue.search.pageNum++
            myVue.allLoaded = false
          }
        }
        this.post(getHouseListOption)
      },
      clearHistory () {
        cache.del(SEARCH_HISTORY_CACHE_KEY)
        this.searchHistoryCache = []
      },
      ensureMoreCases () {
        this.searchList()
      },
      toServiceDiary (house) {
        let isExistReport = house.isExistReport
        if (house.id && isExistReport && isExistReport === '1') {
          window.location.href = globalHostServiceDiary + '/index.html?houseId=' + house.id
        } else {
          let instance = this.$toast('服务日记正在紧张制作中...')
          setTimeout(() => {
            instance.close()
          }, 2000)
        }
      },
      toUpdateServiceDiary (house) {
        if (house) {
          this.$router.push({ path: '/updateServiceDiary', query: { houseId: house.id, contractNo: house.contractNo, contentCount: house.contentCount } })
        }
      }
    }
  }
</script>
<style scoped>
  @import '../../assets/css/searchStyle.css';
  @import '../../assets/css/serviceListStyle.css';
</style>
